﻿@using JxAudio.Front.Enums
@using IconPark
@using Jx.Toolbox.Extensions
@using JxAudio.Front.Data
@using Microsoft.Extensions.Localization
@inherits BootstrapModuleComponentBase
@implements IDisposable

@inject IStringLocalizer<PlayerControl> Localizer
@inject IDispatchService<AddTrackMessage> DispatchService
@inject MessageService MessageService
@inject HttpClient Http

@attribute [JSModuleAutoLoader("./Components/PlayerControl.razor.js", JSObjectReference = true)]

<div class="d-flex flex-column align-items-stretch w-100" style="height: 5rem">
    <input type="range" class="progress-slider" @bind-value="CurrentTimeString" 
           min="0" max="@Duration" step="1" @bind-value:event="oninput" style="background: linear-gradient(to right, var(--bb-header-bg) 0%, var(--bb-header-bg) @(Percent)%, #ddd @(Percent)%, #ddd 100%)">
    
    <div class="d-flex flex-grow-1 align-items-center">
        <div class="flex-1 hide-on-mobile">
            <div class="d-flex">
                <BootstrapBlazor.Components.Avatar Url=@($"/api/Cover?coverId={CurrentTrack?.CoverId}") IsCircle="true" class="@(_playStatus == PlayStatus.Play ? "slow_rotating w-11 h-11 " : "w-11 h-11 ")"></BootstrapBlazor.Components.Avatar>
                <div class="ms-2 text-xs d-flex flex-column justify-content-between">
                    <div class="w-52 cursor-pointer text-truncate">
                        <div class="d-flex">
                            <span>@(CurrentTrack?.Title ?? "JxAudio")</span>
                            <div class="ms-2 text-secondary">@(CurrentTrack?.Artists == null ? "JxAudio" : string.Join(',', CurrentTrack.Artists.Select(x => x.Name)))</div>
                        </div>
                    </div>
                    <div class="d-flex gap-x-3">
                        <Button Color="Color.None" style="color: red" OnClick="Star">
                            <Like Size="18" StrokeWidth="3" Theme="@(CurrentTrack?.Star == true ? ThemeType.Filled : ThemeType.Outline)"></Like>
                        </Button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1">
            <div class="d-flex align-items-center justify-content-center gap-x-3">
                <Button Color="Color.None" style="color: red" OnClick="LoopChanged">
                    @switch(_loopStatus)
                    {
                        case LoopStatus.LoopOnce:
                            <LoopOnce Size="20"></LoopOnce>
                            break;
                        case LoopStatus.PlayOnce:
                            <PlayOnce Size="20"></PlayOnce>
                            break;
                        case LoopStatus.ShuffleOne:
                            <ShuffleOne Size="20"></ShuffleOne>
                            break;
                    }
                </Button>
                <Button Color="Color.None" OnClick="Preview">
                    <GoStart Size="28"></GoStart>
                </Button>
                <Button Color="Color.None" style="color: var(--bb-header-bg)" OnClick="Play" 
                        class="@(_playStatus == PlayStatus.Loading ? "rotating" : "")">
                    @switch (_playStatus)
                    {
                        case PlayStatus.Stop:
                        case PlayStatus.Pause:
                            <Play Size="45" Theme="ThemeType.Filled"></Play>
                            break;
                        case PlayStatus.Play:
                            <PauseOne Size="45" Theme="ThemeType.Filled"></PauseOne>
                            break;
                        case PlayStatus.Loading:
                            <LoadingFour Size="45" Theme="ThemeType.Filled"></LoadingFour>
                            break;
                    }
                </Button>
                <Button Color="Color.None" OnClick="Next">
                    <GoEnd Size="28"></GoEnd>
                </Button>
                <PopConfirmButton CustomClass="custom-popup" Placement="Placement.Top">
                    <BodyTemplate>
                        <div class="d-flex align-items-center">
                            <VolumeControl @bind-Volume="@Volume"></VolumeControl>
                        </div>
                    </BodyTemplate>
                    <ChildContent>
                        <VolumeSmall Size="20"></VolumeSmall>
                    </ChildContent>
                </PopConfirmButton>
                
            </div>
        </div>
        <div class="flex-1">
            <div class="d-flex justify-content-end align-items-center gap-x-2-5">
                <span class="text-xs">
                    @CurrentTime.ToTimeString() / @Duration.ToTimeString()
                </span>
                <Button Color="Color.None" OnClick="() => { _showLrc = !_showLrc; StateHasChanged();}">
                    <TextMessage Size="18"></TextMessage>
                </Button>
                <PopConfirmButton CustomClass="custom-popup" Placement="Placement.Top">
                    <BodyTemplate>
                        <PlayListControl Tracks="_tracks" SelectedTrack="CurrentTrack" SelectedTrackChanged="SelectedTrackChanged"
                                         OnTrackDelete="TrackDelete"></PlayListControl>
                    </BodyTemplate>
                    <ChildContent>
                        <div class="d-flex align-items-center">
                            <MusicList Size="18" StrokeWidth="3"></MusicList>
                            <span class="text-xs">@_tracks.Count</span>
                        </div>
                    </ChildContent>
                </PopConfirmButton>
            </div>
        </div>
    </div>
</div>

@if (_showLrc)
{
    <div class="lyrics p-3">
        <p>@_lrc</p>
    </div>
}
